<template>
  <div class="panel panel-primary">
    <ul class="list-group">
      <li class="list-group-item list-group-item-info">
        <button @click="query()">查询</button
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button @click="add()">增加</button>
        <button @click="alterFlag(false)">增加2</button>
      </li>
    </ul>
    <!-- Single button -->
    <el-dialog :visible.sync="flag" width="30%">
      <el-form>
        <el-form-item label="uname">
          <el-input auto-complete="off"  placeholder="请输入uname" v-model="form.upassword"></el-input>
        </el-form-item>
        <el-form-item label="upassword">
          <el-input auto-complete="off"  placeholder="请输入upassword" v-model="form.uname"> </el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="alterFlag(true)">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "permission",
  data() {
    return {
      flag: false,
      form:{
        uname:"",
        upassword:""
      }
    };
  },
  methods: {
    alterFlag(value) {
      if(value==false){
      this.flag = true;}
      else{
        this.flag=false
      }
    },
    query() {
      this.$router.push("/query");
      /*   const uid=prompt("请输入你要查询的UID")
          document.querySelector("#user").innerHTML=`
          uid:001  uname:张三  upassword:123456  identity:权限1，权限2，权限3，权限4` */
    },
    add() {
      this.$router.push("/add");
      /*   const uid = prompt("请输入你的uid");
      const uname = prompt("请输入你的uname");
      const upassword = prompt("请输入你的upassword");
      const identity = prompt("请输入你的identity");
      const tr = document.createElement("tr");
      tr.innerHTML =
      `  <tr data-v-60af9bf4=""><td data-v-60af9bf4="">`+uid+`</td> <td data-v-60af9bf4="">`+uname+`</td> <td data-v-60af9bf4="">`+upassword+`</td> <td data-v-60af9bf4="">`+identity+`</td> <td data-v-60af9bf4=""><div data-v-60af9bf4="" role="group" aria-label="..." class="btn-group"><button data-v-60af9bf4="" type="button" class="btn btn-default">
            删
          </button> <button data-v-60af9bf4="" type="button" class="btn btn-default">
            改
          </button> <button data-v-60af9bf4="" type="button" class="btn btn-default">
            删除用户权限
          </button> <button data-v-60af9bf4="" type="button" class="btn btn-default">
            增加用户权限
          </button></div></td></tr>`;
      const child2 = document.querySelector("#table");
      child2.appendChild(tr); */
    },
  },
};
</script>